import VueRouter from 'vue-router'

import about from "@/pages/About.vue";
import home from "@/pages/Home.vue";
import news from "@/pages/News.vue";
import message from "@/pages/Message.vue";
import detail from "@/pages/Detail.vue";
//创建并暴露VueRouter对象

const router = new VueRouter({
    routes: [
        {
            name: 'about',
            path: '/about',
            component: about,
            meta: {title: '关于'}
        },
        {
            name: 'home',
            path: '/home',
            component: home,
            meta: {title: '主页'},
            //在这个配置项里面加入子路径
            children: [
                {
                    name: 'news',
                    // 注意这里的路径不要带/
                    path: 'news',
                    component: news,
                    //配置元信息
                    meta: {isAuth: true, title: '新闻'},
                    // 独享的路由守位 只有前置路由守卫 没有后置的路由守卫
                    // beforeEnter(to, from, next) {
                    //     if (to.meta.isAuth) {
                    //         if (localStorage.myName === '彭于晏') {
                    //             // 放行
                    //             next();
                    //         } else {
                    //             alert('你的名字数据 不对哦');
                    //         }
                    //     } else {
                    //         next();
                    //     }
                    // }
                },
                {
                    name: 'message',
                    path: 'message',
                    component: message,
                    meta: {isAuth: true, title: '消息'},
                    children: [
                        {
                            // 给路径命名 使用时传入一个对象指定名字即可
                            name: 'detail',
                            //使用parmas参数要在路径后面占位
                            path: 'detail',
                            component: detail,
                            // 在这里给detail的组件传入参数 这样会把参数写死（不常用）
                            // props:{title:'我很帅',id:'001'}
                            // 将props的params参数传给detail组件 只能用于params参数
                            // props:true
                            // 调方法时会传入一个参数 $router 这样就可以传query参数 和 params参数
                            props($router) {
                                //返回一个参数
                                return {
                                    id: $router.query.id,
                                    title: $router.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
//配置全局路由前置守卫 在初始化项目时会调用 和在切换路由之前调用
// router.beforeEach((to, from, next) => {
//     if(to.meta.isAuth) {
//         if (localStorage.myName === '彭于晏') {
//             // 放行
//             next();
//         } else {
//             alert('你的名字数据 不对哦');
//         }
//     } else {
//         next();
//     }
// });
//配置全局路由后置守卫 在初始化项目时会调用 和在切换路由之后调用
// router.afterEach((to) => {
//     // 切换页面标签名
//     document.title = to.meta.title || '我的vue系统';
// })


export default router